import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

const app = createApp(App)

// 添加屏幕适配逻辑
const handleScreenAdapt = () => {
  const aspectRatio = 16 / 9
  const currentRatio = window.innerWidth / window.innerHeight
  const app = document.getElementById('app')
  
  if (!app) return
  
  if (currentRatio > aspectRatio) {
    // 屏幕比例大于16:9，左右留白，上下占满
    const width = window.innerHeight * aspectRatio
    app.style.width = `${width}px`
    app.style.height = '100vh'
    app.style.margin = '0 auto'
  } else if (currentRatio < aspectRatio) {
    // 屏幕比例小于16:9，上下留白，左右占满
    const height = window.innerWidth / aspectRatio
    app.style.width = '100vw'
    app.style.height = `${height}px`
    app.style.margin = 'auto 0'
    app.style.position = 'absolute'
    app.style.top = '50%'
    app.style.left = '0'
    app.style.transform = 'translateY(-50%)'
  } else {
    // 屏幕比例刚好是16:9，全屏显示
    app.style.width = '100vw'
    app.style.height = '100vh'
    app.style.margin = '0'
  }
}

// 初始化屏幕适配
handleScreenAdapt()

// 监听窗口大小变化
window.addEventListener('resize', handleScreenAdapt)

app.mount('#app')
